<!DOCTYPE html>
<html>
<head>
    <title>Seamless M4T Model</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f6f7fb;
            margin: 0;
            padding: 0;
        }
        .header {
            background-color: #007bff;
            color: #fff;
            padding: 5px;
            text-align: center;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }
        /* .btn {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 3px;
            cursor: pointer;
            margin-right: 10px;
        } */
        .btn-secondary {
            background-color: #6c757d;
        }
        .result {
            margin-top: 10px;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        .loader-container {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }
        .loader {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<body>
    <!-- <div class="header">
        <h6 class="display-7" style="font-size:80%" >Seamless M4T Model</h6>
    </div> -->

    <div class="container">
        <h6 class="text-center display-7">Seamless M4T Model</h6>
        <div class="result form-outline"> 
            <p style="font-size:80%"  class="card-subtitle mb-2 text-muted small">Choose Task</p>
            <select style="font-size:80%" class="form-control form-control-sm" id="task" enabled>
                <option value="s2st">S2ST (Speech to Speech Translation)</option>
                <option value="s2tt">S2TT (Speech to Text Translation)</option>
                <option value="t2st">T2ST (Text to Speech Translation)</option>
                <option value="t2tt">T2TT (Text to Text Translation)</option>
            </select>
        </div>

        <div hidden = "hidden" id="sourceTargetLangDiv" class="result"> 
            <div class="row">
                <div class="col">
                    <p style="font-size:80%"  class="card-subtitle mb-2 text-muted small">Source Language</p>
                    <select style="font-size:80%"  class="form-control form-control-sm" id="sourceLanguage" enabled>
                        <option value="English">English</option>
                        <option value="Modern Standard Arabic">Modern Standard Arabic</option>
                        <option value="Bengali">Bengali</option>
                        <option value="Catalan">Catalan</option>
                        <option value="Czech">Czech</option>
                        <option value="Mandarin Chinese">Mandarin Chinese</option>
                        <option value="Welsh">Welsh</option>
                        <option value="Danish">Danish</option>
                        <option value="German">German</option>
                        <option value="Estonian">Estonian</option>
                        <option value="Finnish">Finnish</option>
                        <option value="French">French</option>
                        <option value="Hindi">Hindi</option>
                        <option value="Indonesian">Indonesian</option>
                        <option value="Italian">Italian</option>
                        <option value="Japanese">Japanese</option>
                        <option value="Korean">Korean</option>
                        <option value="Maltese">Maltese</option>
                        <option value="Dutch">Dutch</option>
                        <option value="Western Persian">Western Persian</option>
                        <option value="Polish">Polish</option>
                        <option value="Portuguese">Portuguese</option>
                        <option value="Romanian">Romanian</option>
                        <option value="Russian">Russian</option>
                        <option value="Slovak">Slovak</option>
                        <option value="Spanish">Spanish</option>
                        <option value="Swedish">Swedish</option>
                        <option value="Swahili">Swahili</option>
                        <option value="Telugu">Telugu</option>
                        <option value="Tagalog">Tagalog</option>
                        <option value="Thai">Thai</option>
                        <option value="Turkish">Turkish</option>
                        <option value="Ukrainian">Ukrainian</option>
                        <option value="Urdu">Urdu</option>
                        <option value="Northern Uzbek">Northern Uzbek</option>
                        <option value="Vietnamese">Vietnamese</option>
                        <!-- Add more language options as needed -->
                    </select>
                </div>
                <div class="col">
                    <p style="font-size:80%"  class="card-subtitle mb-2 text-muted small">Target Language</p>
                    <select style="font-size:80%" class="form-control form-control-sm" id="targetLanguage2" enabled>
                        <option value="English">English</option>
                        <option value="Modern Standard Arabic">Modern Standard Arabic</option>
                        <option value="Bengali">Bengali</option>
                        <option value="Catalan">Catalan</option>
                        <option value="Czech">Czech</option>
                        <option value="Mandarin Chinese">Mandarin Chinese</option>
                        <option value="Welsh">Welsh</option>
                        <option value="Danish">Danish</option>
                        <option value="German">German</option>
                        <option value="Estonian">Estonian</option>
                        <option value="Finnish">Finnish</option>
                        <option value="French">French</option>
                        <option value="Hindi">Hindi</option>
                        <option value="Indonesian">Indonesian</option>
                        <option value="Italian">Italian</option>
                        <option value="Japanese">Japanese</option>
                        <option value="Korean">Korean</option>
                        <option value="Maltese">Maltese</option>
                        <option value="Dutch">Dutch</option>
                        <option value="Western Persian">Western Persian</option>
                        <option value="Polish">Polish</option>
                        <option value="Portuguese">Portuguese</option>
                        <option value="Romanian">Romanian</option>
                        <option value="Russian">Russian</option>
                        <option value="Slovak">Slovak</option>
                        <option value="Spanish">Spanish</option>
                        <option value="Swedish">Swedish</option>
                        <option value="Swahili">Swahili</option>
                        <option value="Telugu">Telugu</option>
                        <option value="Tagalog">Tagalog</option>
                        <option value="Thai">Thai</option>
                        <option value="Turkish">Turkish</option>
                        <option value="Ukrainian">Ukrainian</option>
                        <option value="Urdu">Urdu</option>
                        <option value="Northern Uzbek">Northern Uzbek</option>
                        <option value="Vietnamese">Vietnamese</option>
                    </select>
                </div>
            </div>
        </div>

        <div id="targetLanguageDiv" class="result"> 
            <p style="font-size:80%"  class="card-subtitle mb-2 text-muted small">Target Language</p>
            <select style="font-size:80%" class="form-control form-control-sm" id="targetLanguage" enabled>
                <option value="English">English</option>
                <option value="Modern Standard Arabic">Modern Standard Arabic</option>
                <option value="Bengali">Bengali</option>
                <option value="Catalan">Catalan</option>
                <option value="Czech">Czech</option>
                <option value="Mandarin Chinese">Mandarin Chinese</option>
                <option value="Welsh">Welsh</option>
                <option value="Danish">Danish</option>
                <option value="German">German</option>
                <option value="Estonian">Estonian</option>
                <option value="Finnish">Finnish</option>
                <option value="French">French</option>
                <option value="Hindi">Hindi</option>
                <option value="Indonesian">Indonesian</option>
                <option value="Italian">Italian</option>
                <option value="Japanese">Japanese</option>
                <option value="Korean">Korean</option>
                <option value="Maltese">Maltese</option>
                <option value="Dutch">Dutch</option>
                <option value="Western Persian">Western Persian</option>
                <option value="Polish">Polish</option>
                <option value="Portuguese">Portuguese</option>
                <option value="Romanian">Romanian</option>
                <option value="Russian">Russian</option>
                <option value="Slovak">Slovak</option>
                <option value="Spanish">Spanish</option>
                <option value="Swedish">Swedish</option>
                <option value="Swahili">Swahili</option>
                <option value="Telugu">Telugu</option>
                <option value="Tagalog">Tagalog</option>
                <option value="Thai">Thai</option>
                <option value="Turkish">Turkish</option>
                <option value="Ukrainian">Ukrainian</option>
                <option value="Urdu">Urdu</option>
                <option value="Northern Uzbek">Northern Uzbek</option>
                <option value="Vietnamese">Vietnamese</option>
            </select>
        </div>

        <div hidden = "hidden" id="inputTextDiv" class=" result form-outline">
            <p  style="font-size:80%"  class="card-subtitle mb-2 text-muted small">Input Text</p>
            <textarea style="font-size:80%" class="form-control" id="inputText" enabled></textarea>
        </div>

        <div id="radioButtonDiv" class="result">
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" id="selectFile" name="inputChoice" value="file" checked>
                <label for="selectFile" style="font-size:80%" class="small">Select Audio File</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" id="recordAudio" name="inputChoice" value="record">
                <label for="recordAudio" class="small" style="font-size:80%" >Record Audio</label>
            </div>
    
            <!-- <br> -->
            <!-- <br> -->
    
            <div>
                <input style="font-size:80%" class="btn btn-outline-secondary w-100" type="file" id="fileInput" accept=".wav, .mp3">
                <button style="font-size:80%" hidden = "hidden" class="btn btn-outline-secondary w-25" id="recordButton" disabled>Record</button>
                <button style="font-size:80%" hidden = "hidden" class="btn btn-outline-secondary w-25" id="stopButton" disabled>Stop</button>
            </div>
        </div>
        
        <p></p>

        <button style="font-size:80%" class="btn btn-primary btn-block w-100" id="translateButton" disabled>Translate</button>
        
        <div class="result" id="translationResult">
            <div class=" result form-outline">
                <p class="card-subtitle mb-2 text-muted small" style="font-size:80%" >Translated Text</p>
                <textarea style="font-size:80%" class="form-control" id="translatedText" disabled></textarea>
            </div>
            <div id="translatedSpeechDiv" class="form-outline result">
                <p class="card-subtitle mb-2 text-muted small" style="font-size:80%" >Translated Speech</p>
                <audio class="w-100" id="outputAudio" controls></audio>
            </div>
        </div>
    </div>

    <div class="loader-container" id="loaderContainer">
        <div class="loader"></div>
    </div>

    <footer class="text-center text-lg-start bg-white text-muted">
        <div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.025);">
            PGD Project By Areej Javed
        </div>
    </footer>
        
    <script>
        let mediaRecorder;
        const chunks = [];
        const fileInput = document.getElementById('fileInput');
        const recordButton = document.getElementById('recordButton');
        const stopButton = document.getElementById('stopButton');
        const translateButton = document.getElementById('translateButton');
        const translatedText = document.getElementById('translatedText');
        const outputAudio = document.getElementById('outputAudio');
        const selectFileRadio = document.getElementById('selectFile');
        const recordAudioRadio = document.getElementById('recordAudio');
        const loaderContainer = document.getElementById('loaderContainer');
        const targetLanguage = document.getElementById('targetLanguage');
        const targetLanguageDiv = document.getElementById('targetLanguageDiv');
        const task = document.getElementById('task');
        const sourceLanguage = document.getElementById('sourceLanguage');
        const targetLanguage2 = document.getElementById('targetLanguage2');
        const inputText = document.getElementById('inputText');
        const sourceTargetLanguageDiv = document.getElementById('sourceTargetLangDiv');
        const inputTextDiv = document.getElementById('inputTextDiv');
        const radioButtonDiv = document.getElementById('radioButtonDiv');
        const translatedSpeechDiv = document.getElementById('translatedSpeechDiv');
        loaderContainer.style.display = 'none';
        file = null;

        task.addEventListener('change', () => 
        {
            if(task.value == 's2st')
            {
                targetLanguageDiv.removeAttribute("hidden")
                radioButtonDiv.removeAttribute("hidden")
                translatedSpeechDiv.removeAttribute("hidden")
                sourceTargetLanguageDiv.setAttribute("hidden", "hidden")
                inputTextDiv.setAttribute("hidden", "hidden")
                translateButton.disabled = true;
                // translatedText.value = ''
                // outputAudio.src = '';
            }
            else if(task.value == 's2tt')
            {
                translatedSpeechDiv.setAttribute("hidden", "hidden")
                targetLanguageDiv.removeAttribute("hidden")
                radioButtonDiv.removeAttribute("hidden")
                sourceTargetLanguageDiv.setAttribute("hidden", "hidden")
                inputTextDiv.setAttribute("hidden", "hidden")
                translateButton.disabled = true;
                // translatedText.value = ''
                // outputAudio.src = '';
            }
            else if(task.value == 't2st')
            {
                sourceTargetLanguageDiv.removeAttribute("hidden")
                inputTextDiv.removeAttribute("hidden")
                targetLanguageDiv.setAttribute("hidden", "hidden")
                radioButtonDiv.setAttribute("hidden", "hidden")
                translatedSpeechDiv.removeAttribute("hidden")
                translateButton.disabled = false;
                // translatedText.value = ''
                inputText.value = ''
                // outputAudio.src = '';
            }
            else if(task.value == 't2tt')
            {
                sourceTargetLanguageDiv.removeAttribute("hidden")
                inputTextDiv.removeAttribute("hidden")
                targetLanguageDiv.setAttribute("hidden", "hidden")
                radioButtonDiv.setAttribute("hidden", "hidden")
                translatedSpeechDiv.setAttribute("hidden", "hidden")
                translateButton.disabled = false;
                // translatedText.value = ''
                inputText.value = ''
                // outputAudio.src = '';
            }
        });

        fileInput.addEventListener('change', () => {
            translateButton.disabled = false;
            // outputAudio.src = '';
            // translatedText.value = "";
        });

        selectFileRadio.addEventListener('change', () => {
            fileInput.removeAttribute("hidden")
            recordButton.setAttribute("hidden", "hidden");
            stopButton.setAttribute("hidden", "hidden");
            // translatedText.value = "";
            file = null;
            translateButton.disabled = true;
            // outputAudio.src = '';
        });

        recordAudioRadio.addEventListener('change', () => {
            fileInput.setAttribute("hidden", "hidden");
            recordButton.removeAttribute("hidden");
            stopButton.removeAttribute("hidden");
            // translatedText.value = "";
            // outputAudio.src = '';
            recordButton.disabled = false;
            file = null;
            translateButton.disabled = true;
            fileInput.value = '';
        });

        recordButton.addEventListener('click', async () => {
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            mediaRecorder = new MediaRecorder(stream);
            file = null;

            mediaRecorder.ondataavailable = (event) => {
                if (event.data.size > 0) {
                    chunks.push(event.data);
                }
            };

            mediaRecorder.onstop = () => {
                const blob = new Blob(chunks, { type: 'audio/wav' });
                file = new File([blob], 'recorded_audio.wav');
                translateButton.disabled = false;
            };

            mediaRecorder.start();
            recordButton.disabled = true;
            stopButton.disabled = false;
        });

        stopButton.addEventListener('click', () => {
            mediaRecorder.stop();
            stopButton.disabled = true;
            recordButton.disabled = false;
        });

        translateButton.addEventListener('click', async () => {
            try 
            {
                loaderContainer.style.display = 'flex';
                const formData = new FormData();

                console.log(fileInput.files[0])
                console.log('recordedAudio', file != null ? file : '')
                console.log('selectedAudio', fileInput.files[0] != null ? fileInput.files[0] : '')

                formData.append('selectedAudio', fileInput.files[0] != null ? fileInput.files[0] : '');
                formData.append('recordedAudio', file != null ? file : '');
                formData.append('targetLanguage', targetLanguage.value);
                formData.append('targetLanguage2', targetLanguage2.value);
                formData.append('task', task.value);
                formData.append('sourceLanguage', sourceLanguage.value != null ? sourceLanguage.value : '');
                formData.append('inputText', inputText.value != null ? inputText.value : '');

                const response = await fetch('/translate', {
                    method: 'POST',
                    body: formData,
                });

                const data = await response.json();
                console.log("data : " + data)

                if(data != null)
                {
                    if (data.error) 
                    {
                        console.log(data.error)
                        translatedText.textContent = 'Translation failed.';
                        outputAudio.src = '';
                    } 
                    else 
                    {
                        console.log("no error")
                        console.log(data.text)
                        translatedText.textContent = data.text;
                        outputAudio.src = data.audio_url;
                    }
                }

                fileInput.value = '';
                loaderContainer.style.display = 'none';
                file = null;
                translateButton.disabled = task.value == 's2st' || task.value == 's2tt' ? true : false;

            } catch (error) {
                console.error('Error:', error);
                translatedText.textContent = 'Translation failed.';
                outputAudio.src = '';
                loaderContainer.style.display = 'none';
            }
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html>